<template>
  <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="800px" custom-class="mydialog" append-to-body @close="handleClose">
    <div class="dialog-content">
      <div>
        <el-row :gutter="20" class="row-common pb-20">
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="门店">门店:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">门店</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div name="提货方式">提货方式：</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">提货方式：</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row-common pb-20">
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="支付方式">支付方式:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">支付方式</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="实款金额">实款金额:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">实款金额</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div name="提货方式">收款日期</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">收款日期</div>
              </el-col>
            </el-row>
          </el-col>

        </el-row>
        <el-row :gutter="20" class="row-common pb-20">
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="用户名称">用户名称:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">用户名称</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div class="" name="用户电话">用户电话:</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">用户电话</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="1">
              <el-col :span="8">
                <div name="提货方式">用户地址</div>
              </el-col>
              <el-col :span="16">
                <div class="shipment_div">用户地址</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row-common pb-20">
          <el-col :span="16">
            <el-row :gutter="1">
              <el-col :span="4">
                <div class="" name="备注">备注:</div>
              </el-col>
              <el-col :span="20">
                <div class="shipment_div">备注</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-form ref="form1" :model="form" :rules="rules" label-width="150px">
        <el-table
          :data="tableData"
          border
          show-summary
          style="width: 100%"
          class="dialog-table">
          <el-table-column
            prop="id"
            label="SKU名称"
            width="120"/>
          <el-table-column
            prop="order"
            label="销售总数"/>
          <el-table-column
            prop="amount1"
            label="销售单价"/>
          <el-table-column
            prop="amount2"
            label="总金额"/>
        </el-table>
      </el-form>
      <div class="text-center mt-30">
        <el-button class="greenbt" type="primary">通过审批</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default{
  props: {
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {
        title: '', show: true
      },
      form: {
        type_options: [], type: '', number: ''
      },
      rules: {},
      tableData: [{
        id: '12987122',
        order: '23',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987123',
        order: '23',
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }]
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
